<template>
  <div class="manuscriptCenter">
    <h1 class="title">稿件中心</h1>
    <div class="manuscriptCenter-content">
      <div class="content-tips">
        <span>待处理：19个稿件待确认/1个稿件待补充关键词</span>
        <!-- <img
          src="@/assets/image/mine/button／common／download／normal@2x.png"
          alt=""
        /> -->
      </div>
      <div class="demand-select">
        <el-select
          width="auto"
          v-if="demandList.length > 2"
          v-model="curDemand"
          class="m-2"
        >
          <el-option
            v-for="item in demandList"
            :key="item.value"
            :label="item.text"
            :value="item.text"
          />
        </el-select>
        <div class="current-demand-name" v-else>{{ curDemand }}</div>
        <div class="current-data">
          <span class="data-name">已收稿：</span>
          <span class="data-num">60</span>
        </div>
      </div>
      <div class="tab-content">
        <van-tabs
          line-width="8px"
          background="none"
          title-active-color="#333333"
          title-inactive-color="#808080"
          v-model:active="activeStatus"
        >
          <van-tab
            :title="item.name"
            v-for="item in statusList"
            :key="item.value"
            :name="item.value"
          >
            <template #title>
              <span>{{ item.name }}</span>
              <span class="tips" v-if="item.value === activeStatus"></span>
            </template>
          </van-tab>
        </van-tabs>
      </div>
      <div v-if="currentList.length > 0" class="task-list">
        <div
          class="task-item"
          v-for="item in curStatusListComputed"
          :key="item.taskId"
          @click="showTaskDetail = true"
          :class="{'task-will': willDo.includes(item.status), 'task-doing': doing.includes(item.status), 'task-done': item.status === '已完成'}"
        >
          <div class="task-item-title">
            <div class="task-title-left">
              <div class="img-icon">
                <img
                  v-if="
                    willDo.includes(item.status) &&
                    processList[0].includes(item.status)
                  "
                  class="status-img"
                  src="@/assets/image/mine/img／mission／step／A／yellow@2x.png"
                  alt=""
                />
                <img
                  v-if="
                    willDo.includes(item.status) &&
                    processList[1].includes(item.status)
                  "
                  class="status-img"
                  src="@/assets/image/mine/img／mission／step／B／yellow@2x.png"
                  alt=""
                />
                <img
                  v-if="
                    doing.includes(item.status) &&
                    processList[1].includes(item.status)
                  "
                  class="status-img"
                  src="@/assets/image/mine/img／mission／step／B／blue@2x.png"
                  alt=""
                />
                <img
                  v-if="
                    doing.includes(item.status) &&
                    processList[2].includes(item.status)
                  "
                  class="status-img"
                  src="@/assets/image/mine/img／mission／step／C／blue@2x.png"
                  alt=""
                />
                <img
                  v-if="
                    willDo.includes(item.status) &&
                    processList[3].includes(item.status)
                  "
                  class="status-img"
                  src="@/assets/image/mine/img／mission／step／D／yellow@2x.png"
                  alt=""
                />
                <img
                  v-if="
                    doing.includes(item.status) &&
                    processList[3].includes(item.status)
                  "
                  class="status-img"
                  src="@/assets/image/mine/img／mission／step／D／blue@2x.png"
                  alt=""
                />
                <img
                  v-if="
                    singleDemandStatus(item) === 'icon-status-doing' &&
                    processList[4].includes(item.status)
                  "
                  class="status-img"
                  src="@/assets/image/mine/img／mission／step／E／blue@2x.png"
                  alt=""
                />
                <img
                  v-if="
                    singleDemandStatus(item) === 'icon-status-done' &&
                    processList[4].includes(item.status)
                  "
                  class="status-img"
                  src="@/assets/image/mine/img／mission／step／E／grey@2x.png"
                  alt=""
                />
                <img
                  v-if="item.status === '未补充已过期'"
                  class="status-img"
                  src="@/assets/image/mine/img／mission／step／A／grey@2x.png"
                  alt=""
                />
              </div>
              <div class="taskId ml-8">
                <span class="taskId-name">任务ID：</span>
                <span class="taskId-num">{{ item.taskId }}</span>
              </div>
            </div>
            <div class="task-title-status">
              <img
                class="info-status-img"
                v-if="item.status === '待补充'"
                src="@/assets/image/mine/img／missionDetail／A／awaitFilling／yellow@2x.png"
                alt=""
              />
              <img
                class="info-status-img"
                v-if="item.status === '关键词审核中'"
                src="@/assets/image/mine/img／missionDetail／B／auditing／blue@2x.png"
                alt=""
              />
              <img
                class="info-status-img"
                v-if="item.status === '待确认'"
                src="@/assets/image/mine/img／missionDetail／D／awaitConfirm／yellow@2x.png"
                alt=""
              />
              <img
                class="info-status-img"
                v-if="item.status === '稿件修改中'"
                src="@/assets/image/mine/img／missionDetail／D／modifying／blue@2x.png"
                alt=""
              />
              <img
                class="info-status-img"
                v-if="
                  item.status === '已完成' &&
                  singleDemandStatus(item) === 'icon-status-doing'
                "
                src="@/assets/image/mine/img／missionDetail／E／done／blue@2x.png"
                alt=""
              />
              <img
                class="info-status-img"
                v-if="
                  item.status === '已完成' &&
                  singleDemandStatus(item) === 'icon-status-done'
                "
                src="@/assets/image/mine/img／missionDetail／E／doneExpired／grey@2x.png"
                alt=""
              />
              <img
                class="info-status-img"
                v-if="item.status === '待修改'"
                src="@/assets/image/mine/img／missionDetail／B／awaitModify／yellow@2x.png"
                alt=""
              />
              <img
                class="info-status-img"
                v-if="item.status === '撰写中'"
                src="@/assets/image/mine/img／missionDetail／C／writing／blue@2x.png"
                alt=""
              />
              <img
                class="info-status-img"
                v-if="item.status === '未补充已过期'"
                src="@/assets/image/mine/img／missionDetail／A／fillingExpired／grey@2x.png"
                alt=""
              />
            </div>
          </div>
          <div class="task-item-content">
            <div class="keywords">
              {{ item.keyword || "暂无关键词. 请手动添加" }}
            </div>
            <div class="operation-part">
              <div class="task-time">
                <img
                  src="@/assets/image/mine/icon／clock／black@2x.png"
                  alt=""
                />{{ item.estimatedTime }}
              </div>
              <div class="operation-button" v-if="item.status === '待补充'">
                去补充
              </div>
              <div class="operation-button" v-if="item.status === '待修改'">
                去修改
              </div>
              <div class="operation-button" @click.stop="handleOpenConfirm" v-if="item.status === '待确认'">
                确认稿件
              </div>
              <div
                class="operation-button down-load"
                v-if="
                  item.status === '已完成' &&
                  singleDemandStatus(item) === 'icon-status-doing'
                "
              >
                下载稿件
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="create-key-words" v-else>
        <div class="add-button" @click="handleCreateTask">
          <img
            src="@/assets/image/mine/icon／missionlist／createMission／black@2x.png"
            alt=""
          />
          <span>添加关键词</span>
        </div>
        <p>关键词描述的越丰富、准确，小编攥写的文章质量越高哟~</p>
      </div>
      <Draggable
        @handleClick="handleCreateTask"
        :initBottom="180"
        width="60"
        height="60"
      >
        <img
          class="create-button-img"
          src="@/assets/image/mobile/mine/Component 302@2x.png"
          alt=""
        />
      </Draggable>
      <Draggable
        @handleClick="handleDownLoadTask"
        width="40"
        height="40"
        :initBottom="240"
        :initRight="67"
      >
        <img
          class="dowload-button-img"
          src="@/assets/image/mobile/mine/Component 332@2x.png"
          alt=""
        />
      </Draggable>
    </div>
    <createCenter
      :currentDemand="curDemand"
      :isShow="showCreateCenter"
      :demandList="demandList"
      @close="showCreateCenter = false"
      v-if="showCreateCenter"
    ></createCenter>
    <taskDetail
      :currentDemand="curDemand"
      :isShow="showTaskDetail"
      :demandList="demandList"
      @close="showTaskDetail = false"
      v-if="showTaskDetail"
    ></taskDetail>
    <!-- 下载中心 -->
    <downLoadCenter
    :isShow="showDownLoadTask"
      :demandList="demandList"
      @close="showDownLoadTask = false"
      v-if="showDownLoadTask"
    ></downLoadCenter>
    <!-- 确认稿件 -->
    <confirmManuscript     :isShow="showConfirmManuscript"
      :demandList="demandList"
      @close="showConfirmManuscript = false"
      v-if="showConfirmManuscript"></confirmManuscript>
  </div>
</template>

<script setup>
import { ref } from "vue";
import Draggable from "@/components/mobileComponent/common/Draggable.vue";
import createCenter from "./createCenter";
import taskDetail from "./taskDetail";
import downLoadCenter from "./downLoadCenter";
import confirmManuscript from './confirmManuscript'

const showConfirmManuscript = ref(false);
const showTaskDetail = ref(false);
const showCreateCenter = ref(false);
const willDo = ["待补充", "待修改", "待确认"];
const doing = ["稿件修改中", "撰写中", "关键词审核中", "已完成"];
const curDemand = ref("全部需求");
const activeStatus = ref("0");
const demandList = ref([
  { text: "全部需求", value: 0 },
  { text: "新闻网站需求", value: 1 },
  { text: "AI文章需求", value: 2 },
]);
const statusList = [
  {
    name: "待处理",
    value: "0",
  },
  {
    name: "审核中",
    value: "1",
  },
  {
    name: "撰写中",
    value: "2",
  },
  {
    name: "已完成",
    value: "3",
  },
  {
    name: "已关闭",
    value: "4",
  },
];
const processList = [
  ["待补充", "未补充已过期"],
  ["关键词审核中", "待修改"],
  ["撰写中"],
  ["待确认", "稿件修改中"],
  ["已完成"],
];
const curStatusListComputed = computed(() => {
  const statausMap = {
    0: ["待补充", "待修改", "待确认"],
    1: ["关键词审核中"],
    2: ["撰写中", "稿件修改中"],
    3: ["已完成"],
    4: ["已完成", "未补充已过期"],
  };
  return currentList.filter((item) => {
    if (item.status === "已完成") {
      if (
        activeStatus.value == 3 &&
        singleDemandStatus(item) === "icon-status-doing"
      ) {
        return true;
      }
      if (
        activeStatus.value == 4 &&
        singleDemandStatus(item) === "icon-status-done"
      ) {
        return true;
      }
    } else {
      return statausMap[activeStatus.value].includes(item.status);
    }
  });
});
const singleDemandStatus = (item) => {
  if (willDo.includes(item.status)) {
    return "icon-status-will-do";
  } else if (doing.includes(item.status)) {
    if (item.status === "已完成" && item.completionTime) {
      let days =
        (new Date() - new Date(item.completionTime)) / (1000 * 3600 * 24);
      if (days > 30) {
        return "icon-status-done";
      } else {
        return "icon-status-doing";
      }
    } else {
      return "icon-status-doing";
    }
  } else if (item.status === "未补充已过期") {
    return "icon-status-done";
  }
};
const handleCreateTask = () => {
  showCreateCenter.value = true;
};
const showDownLoadTask = ref(false);
const handleDownLoadTask = () => {
  showDownLoadTask.value = true;
}
const handleOpenConfirm = () => {
  showConfirmManuscript.value = true;
}
const currentList = [
  {
    taskId: "W2024078120",
    status: "待补充",
    page: "1",
    estimatedTime: "2024.06.29",
    keyword: "区块链 / 二次元游戏 / 小红书运营测试威尔而",
    completionTime: "24-06-21-12:00:00",
  },
  {
    taskId: "W2024078110",
    status: "未补充已过期",
    page: "1",
    estimatedTime: "2024.06.29",
    keyword:
      "当前任务超时, 视为用户主动放弃此次交稿服务. 您可以通过创建新任务提交关键词.当前任务超时, 视为用户主动放弃此次交稿服务. 您可以通过创建新任务提交关键词.当前任务超时, 视为用户主动放弃此次交稿服务. 您可以通过创建新任务提交关键词.",
    completionTime: "24-06-21-12:00:00",
  },
  {
    taskId: "W2024078121",
    status: "待确认",
    page: "1",
    estimatedTime: "2024.06.29",
    keywordList: [
      {
        time: "2024-06-29 12:00:00",
        keyword:
          "关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词",
        rejectReason: "内容不符合要求",
        rejectTime: "2024-06-29 16:20:00",
      },
      {
        time: "2024-06-29 12:00:00",
        keyword:
          "关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词",
        passTime: "2024-06-29 16:20:00",
      },
    ],
    manuscriptList: [
      {
        completionTime: "2024-06-21 12:00:00",
        filteName: "稿件名称稿件名称稿件名称 等共计3个稿件",
        versionNum: 1,
        suggestion:
          "修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见",
        suggestionTime: "2024-06-29 16:40:00",
      },
      {
        completionTime: "2024-06-21 12:00:00",
        filteName: "稿件名称稿件名称稿件名称 等共计3个稿件",
        versionNum: 1,
      },
    ],
  },
  {
    taskId: "W2024078122",
    status: "稿件修改中",
    page: "1",
    estimatedTime: "2024.06.29",
    completionTime: "24-06-21-12:00:00",
    manuscriptList: [
      {
        completionTime: "2024-06-21 12:00:00",
        filteName: "稿件名称稿件名称稿件名称 等共计3个稿件",
        versionNum: 1,
        suggestion:
          "修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见",
        suggestionTime: "2024-06-29 16:40:00",
      },
    ],
  },
  {
    taskId: "W2024078123",
    status: "撰写中",
    page: "1",
    estimatedTime: "2024.06.29",
    completionTime: "24-06-21-12:00:00",
    keywordList: [
      {
        time: "2024-06-29 12:00:00",
        keyword:
          "关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词",
        rejectReason: "内容不符合要求",
        rejectTime: "2024-06-29 16:20:00",
      },
      {
        time: "2024-06-29 12:00:00",
        keyword:
          "关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词",
        passTime: "2024-06-29 16:20:00",
      },
    ],
    versionNum: 1,
  },
  {
    taskId: "W2024078124",
    status: "关键词审核中",
    page: "1",
    estimatedTime: "2024.06.29",
    completionTime: "24-06-21-12:00:00",
    keywordList: [
      {
        time: "2024-06-29 12:00:00",
        keyword:
          "关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词",
        rejectReason: "内容不符合要求",
        rejectTime: "2024-06-29 16:20:00",
      },
      {
        time: "2024-06-29 12:00:00",
        keyword:
          "关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词",
      },
    ],
  },
  {
    taskId: "W2024078125",
    status: "待修改",
    page: "1",
    estimatedTime: "2024.06.29",
    completionTime: "24-06-21-12:00:00",
    keywordList: [
      {
        version: "ver1",
        time: "2024-06-29 12:00:00",
        keyword:
          "关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词",
        isRejeact: true,
        rejectReason: "内容不符合要求",
        rejectTime: "2024-06-29 16:20:00",
      },
    ],
    keywordEdit: "",
  },
  {
    taskId: "W2024078126",
    status: "已完成",
    page: "1",
    estimatedTime: "2024.09.29",
    completionTime: "2024-06-21 12:00:00",
    keywordList: [
      {
        time: "2024-06-29 12:00:00",
        keyword:
          "关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词",
        rejectReason: "内容不符合要求",
        rejectTime: "2024-06-29 16:20:00",
      },
      {
        time: "2024-06-29 12:00:00",
        keyword:
          "关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词",
        passTime: "2024-06-29 16:20:00",
      },
    ],
    manuscriptList: [
      {
        completionTime: "2024-06-21 12:00:00",
        filteName: "稿件名称稿件名称稿件名称 等共计3个稿件",
        versionNum: 1,
        suggestion:
          "修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见",
        suggestionTime: "2024-06-29 16:40:00",
      },
      {
        completionTime: "2024-06-21 12:00:00",
        filteName: "稿件名称稿件名称稿件名称 等共计3个稿件",
        versionNum: 1,
      },
    ],
  },
  {
    taskId: "W2024078127",
    status: "已完成",
    page: "1",
    estimatedTime: "2024.06.29",
    completionTime: "2024-05-21 12:00:00",
    keywordList: [
      {
        time: "2024-06-29 12:00:00",
        keyword:
          "关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词",
        rejectReason: "内容不符合要求",
        rejectTime: "2024-06-29 16:20:00",
      },
      {
        time: "2024-06-29 12:00:00",
        keyword:
          "关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词关键词",
        passTime: "2024-06-29 16:20:00",
      },
    ],
    manuscriptList: [
      {
        completionTime: "2024-06-21 12:00:00",
        filteName: "稿件名称稿件名称稿件名称 等共计3个稿件",
        versionNum: 1,
        suggestion:
          "修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见修改意见",
        suggestionTime: "2024-06-29 16:40:00",
      },
      {
        completionTime: "2024-06-21 12:00:00",
        filteName: "稿件名称稿件名称稿件名称 等共计3个稿件",
        versionNum: 1,
      },
    ],
  },
];
</script>

<style lang="scss" scoped>
.manuscriptCenter {
  width: 100%;
  height: calc(100% - 60px);
  position: relative;
  .title {
    width: 100%;
    height: 40px;
    background: #ffffff;
    border-radius: 0px 0px 0px 0px;
    font-weight: bold;
    font-size: 16px;
    color: #333333;
    line-height: 40px;
    text-align: center;
  }
  .manuscriptCenter-content {
    background: #f5f5f5;
    height: calc(100% - 40px);
    padding: 8px 16px;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;

    .create-button-img {
      width: 60px;
    }
    .dowload-button-img {
      width: 40px;
    }
    .content-tips {
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      span {
        font-weight: 500;
        font-size: 12px;
        color: #ec7f20;
      }
      img {
        height: 100%;
      }
    }
    .demand-select {
      width: 100%;
      padding-right: 8px;
      box-sizing: border-box;
      height: 34px;
      background: #ffffff;
      border-radius: 4px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .el-select {
        flex: 1;
      }
      :deep(.el-select__wrapper) {
        box-shadow: none;
        border: none;
        outline: none;
        background: none;
        .el-select__placeholder {
          position: relative;
          width: auto;
          transform: none;
          line-height: 12px;
          span {
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 14px;
            color: #333333;
            display: inline-block;
            max-width: 200px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
        }
        .el-select__selection {
          flex: none;
        }
        .el-select__suffix {
          .el-icon {
            color: #333333;
          }
        }
      }
      :deep(.van-dropdown-menu__bar) {
        height: auto;
        box-shadow: none;
        background: none;
        .van-ellipsis {
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          font-size: 14px;
          color: #333333;
        }
      }
      :deep(.van-overlay) {
        background: none;
      }
      .current-demand-name {
        font-weight: bold;
        font-size: 14px;
        color: #333333;
        margin-left: 12px;
      }
      .current-data {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 12px;
        .data-name {
          color: #666666;
        }
        .data-num {
          color: #4560e6;
        }
      }
    }
    .tab-content {
      :deep(.van-tabs__wrap) {
        background: none;
        .van-tabs__line {
          bottom: 22px;
          left: -16px;
          background: #e62e3d;
        }
        .van-tab {
          flex: none;
          margin-right: 12px;
        }
      }
      .tips {
        width: 4px;
        height: 4px;
        background: #e62e3d;
        border-radius: 50%;
        position: absolute;
        right: -2px;
        top: 16px;
      }
    }
    .task-list {
      flex: 1;
      height: 0;
      overflow: overlay;
      .task-item {
        margin-top: 16px;
        width: 100%;
        height: 152px;
        background: #ffffff;
        border-radius: 8px;
        padding: 12px 8px;
        box-sizing: border-box;
        .task-item-title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-bottom: 12px;
          border-bottom: 1px solid #ebebeb;
          .task-title-left {
            display: flex;
            align-items: center;
            .img-icon {
              width: 24px;
              height: 24px;
            }
            img {
              width: 24px;
              height: 24px;
            }
            .taskId-name {
              font-weight: 500;
              font-size: 11px;
              color: #666666;
              line-height: 14px;
            }
            .taskId-num {
              font-family: Komu A, Komu A;
              font-weight: normal;
              font-size: 14px;
              color: #333333;
            }
          }
          .task-title-status {
            height: 18px;
            img {
              height: 100%;
            }
          }
        }
        .task-item-content {
          margin-top: 12px;
          .keywords {
            width: 100%;
            height: 48px;
            background: #fafafa;
            border-radius: 4px;
            padding: 4px;
            box-sizing: border-box;
            font-weight: 500;
            font-size: 12px;
            color: #999999;
            line-height: 20px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
          .operation-part {
            margin-top: 8px;
            display: flex;
            justify-content: space-between;
            .task-time {
              font-size: 12px;
              color: #b3b3b3;
              display: flex;
              align-items: center;
              img {
                width: 14px;
                opacity: 0.5;
                margin-right: 4px;
              }
            }
            .operation-button {
              padding: 3px 12px;
              background: #fff7ec;
              border-radius: 4px;
              font-size: 12px;
              color: #ec7f20;
            }
            .down-load {
              background: #ecefff;
              color: #4560e6;
            }
          }
        }
      }
      .task-will {
       &:hover{
        border: 2px solid #EC7F20;
        box-shadow: 1px 4px 8px 0px rgba(219,134,60,0.15);
       }
      }
    }
    .create-key-words {
      margin-top: 12px;
      .add-button {
        width: 100%;
        height: 60px;
        background: #ffffff;
        border-radius: 6px 6px 6px 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        > img {
          width: 16px;
          height: 16px;
          margin-right: 4px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 14px;
          color: #1a1a1a;
        }
      }
      p {
        margin-top: 16px;
        font-size: 12px;
        color: #666666;
      }
    }
  }
}
</style>
